<template>
  <div>
    <!-- 表格开始 -->
    <TheTable
      :data="tableData"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
      @selectData="selectData"
      @select-all-event="
        (section) => {
          if (section.length > 0) {
            this.isSelectAll = true;
          } else {
            this.isSelectAll = false;
          }
        }
      "
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          type="selection"
          v-if="index === 1"
          effect="dark"
          align="left"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>
      <el-table-column label="操作" width="125">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            class="el-icon-edit"
            @click="editEvent(scope.row)"
            v-auth="'breed_input_supplier_update'"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            class="el-icon-delete"
            v-auth="'breed_input_supplier_delete'"
            @click="removeSupplier(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </TheTable>
    <el-dialog
      @close="closeEvent"
      title="修改供应商信息"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="editObject"
        label-width="100px"
        ref="formRef"
        :rules="rules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item prop="supplierName" label="供应商名称">
              <el-input v-model="editObject.supplierName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="supplierShortName" label="供应商简称">
              <el-input v-model="editObject.supplierShortName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="legalPerson" label="法人代表">
              <el-input v-model="editObject.legalPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactMethod" label="联系方式">
              <el-input v-model="editObject.contactMethod"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="contactPerson" label="联系人">
              <el-input v-model="editObject.contactPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactNumber" label="联系人电话">
              <el-input v-model="editObject.contactNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="businessScope" label="经营范围">
              <el-input v-model="editObject.businessScope"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type" label="企业类型">
              <el-input v-model="editObject.type"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="businessRegistrationNumber" label="工商注册号">
              <el-input
                v-model="editObject.businessRegistrationNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="businessBackupsCode" label="商务部备号">
              <el-input v-model="editObject.businessBackupsCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="公司简介" prop="introduction">
            <el-input
              type="textarea"
              v-model="editObject.introduction"
            ></el-input>
          </el-form-item>
        </el-row>
        <!-- 地址选择 -->
        <AddressChoose @fatherMethods="getArea" :areaObject="areaObject" />
        <el-row>
          <el-col :span="12">
            <el-form-item prop="houseNumber" label="详细地址">
              <el-input v-model="editObject.houseNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSupplyInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 表格结束 -->
  </div>
</template>

<script>
import { mapState } from "vuex";

import AddressChoose from "../../ProductionManagement/public/AddressChoose";
import {
  getSupplierInfoBypage,
  deleteSupplier,
  editSupplierInfo,
} from "../../../Api/productionmanage/supplier_info";
import { vagueSearchSupplier } from "../../../Api/productionmanage/index";
export default {
  components: {
    AddressChoose,
  },
  props: {
    isSearchMap: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
    },
    searchMap: {
      type: Object,
    },
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      //修改供应商信息传入对象
      editObject: {},
      dialogVisible: false,
      areaObject: {},
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      showPage: true, // 显示分页
      isSelectAll: false,
      selectedData: [],
      selectList: [],
    };
  },
  computed: {
    ...mapState({
      rules: (state) => state.productionInfo.rules,
    }),
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      if (this.isSearchMap) {
        this.fuzzyQuery();
        return;
      }
      const { data: res } = await getSupplierInfoBypage(
        this.page.current,
        this.page.pageSize
      );
      console.log(res);
      if (res.statusCode === 20000) {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      }
    },
    changePage(page) {
      this.page.current = page.current;
      if (this.isSearchMap) {
        this.fuzzyQuery();
        return;
      }
      this.getTableData();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      this.page.pageSize = size.pageSize;
      if (this.isSearchMap) {
        this.fuzzyQuery();
        return;
      }
      this.getTableData();
    },
    //选择事件
    selectData(row) {
      //所选择的详细数据
      this.selectedData = row;
      this.$emit("fatherMethod", row);
    },
    selectAllEvent() {
      console.log("全选");
      this.$emit("change-select-all");
    },
    //修改供应商信息
    async editSupplyInfo() {
      console.log(this.editObject);
      const { data: res } = await editSupplierInfo(this.editObject);
      console.log(res);
      if (res.statusCode === 20000) {
        this.getTableData();
        this.$message.success("修改供应商信息成功");
        this.dialogVisible = false;
      }
    },
    //打开修改面板
    editEvent(row) {
      this.editObject = row;
      delete this.editObject.gmtCreate;
      delete this.editObject.enterpriseId;
      this.areaObject.province = row.province;
      this.areaObject.city = row.city;
      this.areaObject.region = row.region;
      console.log(this.editObject);
      this.dialogVisible = true;
    },
    closeEvent() {
      this.$refs.formRef.resetFields();
    },
    async removeSupplier(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该供应商信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteSupplier(id);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableData();
      }
    },
    //获取地址
    getArea(obj) {
      this.editObject.province = obj.province;
      this.editObject.city = obj.city;
      this.editObject.region = obj.region;
    },
    //模糊查询
    async fuzzyQuery() {
      console.log("模糊查询了");
      const { data: res } = await vagueSearchSupplier(
        this.searchMap,
        this.pageSize,
        this.page.current
      );
      console.log(res);
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    downLoadExcel() {
      console.log(this.selectedData);
      if (this.isSelectAll) {
        let name = "供应商信息";
        let path = `http://120.77.156.205:9603/breed/supplier/excel/download?fileName=${name}`;
        window.location.href = path;
      }
    },
  },
};
</script>